<include file="Public/mheader" />
<style>
body{
	width:100%;
	height:100%;
	background:url(/upload/ntxx/bg_1.png)  no-repeat;
	background-attachment:fixed;
	/*background-size: 100% 100%;
	position: relative;*/
	background-size: cover;
	background-position: 50% 50%;
	font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
	font-size:18px;
}
.center{
	margin:0 auto;
	padding:100px 30px 100px 30px;
}
.content{
	background:rgba(255,255,255,0.6);
}
.title{
	margin-bottom:10px;
}
.img{
	margin-top:10px;
}
.img img{
	max-width:100%;
}

.aw>div{
	margin: 5px -5px;
	border: #888888 1px solid;
	padding: 5px;
	border-radius: 5px;
	position: relative;
}
.aw>.error:after{
	content:"";
	width:3px;
	height:20px;
	position: absolute;
	right:15px;
	bottom:5px;
	border-right: red 3px solid;
	transform:rotate(45deg);
}
.aw>.error:before{
	content:"";
	width:3px;
	height:20px;
	position: absolute;
	right:15px;
	bottom:5px;
	border-right: red 3px solid;
	transform:rotate(-45deg);
}
.aw>.success:after{
	content:"";
	width:10px;
	height:20px;
	position: absolute;
	right:10px;
	bottom:5px;
	border-right: red 3px solid;
	border-bottom: red 3px solid;
	transform:rotate(45deg);
}

.fra{
	position:absolute;
	right:10px;
	top:10px;
	background:rgba(255,255,255,0.6);
	font-size:16px;
}
#time{
}
.cansubmit{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	background:white;
	height:100%;
	padding:30px;
}
.submit-info{
	font-size:14px;
	margin-top:10px;
}
.input{
	margin-top:5px;
}
a.btn.btn-block{
	margin-top:5px;
	margin-bottom:5px;
}
</style>
<div class="center">
	<div class="fra">
		<div>当前第<span class="index">0</span>题，得分：<span class="franum">0</span>，下一题:<span class="time">30</span></div>
	</div>
	<div class="content">
		<div class="title"></div>
		<div class="aw">
			<div class="answer" data-index="1"></div>
			<div class="answer" data-index="2"></div>
			<div class="answer" data-index="3"></div>
		</div>
		<div class="img" style="display:none;">相关图片：<img src="" /></div>
	</div>
	<div class="cansubmit" style="display:none;">
		<div class="cannext">
			<div>恭喜你，您总共回答了<span class="index">0</span>题，目前得分<span class="franum">0</span>，可以提交分数了！您是要提交分数还是继续挑战呢？</div>
			<div class="submit-info">注：提交分数即输入您的姓名、手机号码和单位，将当前分数<span class="franum">0</span>提交并终止挑战，<span class="franum">0</span>即是您的最终分数；继续挑战则只有当您继续回答20道题才能提交</div>
			<a href="javascript:void(0)" class="btn btn-info btn-block" id="tonext">继续答题</a>
		</div>
		<div class="canotnext" style="display:none;">
			<div>恭喜你，你已经将题库答完，共计得分<span class="franum">0</span>，可以提交分数了！</div>
		</div>
		<div class="input">
			<input type="text" class="form-control" id="name" placeholder="您的姓名">
		</div>
		<div class="input">
			<input type="text" class="form-control" id="phone" placeholder="您的手机号码">
		</div>
		<div class="input">
			<input type="text" class="form-control" id="company" placeholder="您的单位">
		</div>
		<div>
			<a href="javascript:void(0)" class="btn btn-info btn-block" id="submit">提交分数</a>
		</div>
	</div>
</div>
<script>

	$(function(){
		var index = -1;
		var title = $(".title");
		var aw1 = $(".aw>div").eq(0);
		var aw2 = $(".aw>div").eq(1);
		var aw3 = $(".aw>div").eq(2);
		var fraDom = $(".franum");
		var fra = 0;
		var timeDom = $(".time");
		var timeout;
		var postanswering = false;
		var notnext = true;
		var tonextssss = false;
		$("#tonext").on("click",function(){
			if(tonextssss) return;
			tonextssss = true;
			notnext = false;
			$(".cansubmit").hide();
			next();
			notnext = true;
			tonextssss = false;
		});
		$("#submit").on("click",function(){
			var name = $("#name").val().trim();
			var phone = $("#phone").val().trim();
			var company = $("#company").val().trim();
			if(!name){
				layer.alert("请填写您的姓名");
				return;
			}
			if(!phone || phone.length!=11){
				layer.alert("请先输入正确的手机号码");
				return;
			}
			$.post('{:U("submit")}',{name:name,phone:phone,company:company},function(data){
				//console.log(data);
				layer.alert(data.info,{
					btn:["确定"],
					yes:function(index){
						layer.close(index);
						if(data.status==1){
							var url = '{:U("rank")}';
							location.href=url;
						}
					}
				});
			});
		});
		$(".answer").on("click",function(){
			if(postanswering){
				return;
			}
			postanswering = true;
			var i = $(this).data("index");
			$.post('{:U("postanswer")}',{index:index,i:i},function(data){
				$(".answer[data-index="+data+"]").addClass("success");
				if(data!=i){
					$(".answer[data-index="+i+"]").addClass("error");
					tonext(4);
				}
				else{
					fra+=5;
					fraDom.html(fra);
					tonext(2);
				}
			});
		});
		function next(){
			if(index+1 != 0 && (index+1) % 20==0 && notnext){
				//alert(1);
				$(".cansubmit").show();
				//notnext = true;
				return;
			}
			index += 1;
			$(".aw>div").removeClass("success").removeClass("error");
			$.post('{:U("getanswer")}',{index:index},function(data){
				postanswering = false;
				if(data.status==2){
					$(".cannext").hide();
					$(".canotnext").show();
					$(".cansubmit").show();
					return;
				}
				else if(data.status==1){
					$(".index").html(index+1);
					title.html(data.title);
					aw1.html(data.display1);
					aw2.html(data.display2);
					aw3.html(data.display3);
					showimg(data.pic);
					tonext(31);
				}
			});
		}
		function tonext(time){
			clearTimeout(timeout);
			var t = time-1;
			if(t<=0){
				next();
				return;
			}
			timeDom.html(t);
			timeout = setTimeout(function(){tonext(t)},1000);
		}
		function showimg(src){
			var img = $(".img");
			var i = new Image();
			i.src = src;
			i.onload = function(){
				img.show().find("img").attr("src",src);
			}
			i.onerror = function(){
				img.hide();
			}
		}
		next();
	});
</script>
<include file="public/footer" />